<template>
  <div class="register">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="会员注册"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 注册表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        maxlength="11"
        placeholder="请输入手机号"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="sendFun($event)"
            :disabled="!timerShow"
          >
            <template v-if="timerShow">发送验证码</template>
            <template v-if="!timerShow">{{ count }}s 后重发</template>
          </van-button>
        </template>
      </van-field>
      <van-field
        v-model="securityCode"
        name="securityCode"
        label="验证码"
        placeholder="请输入验证码"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="设置密码"
        placeholder="请输入新密码"
      />
      <van-field
        v-model="confirmPassword"
        type="password"
        name="confirmPassword"
        label="确认密码"
        placeholder="请再次输入密码"
      />
      <div style="margin: 16px;">
        <!-- 协议 -->
        <p class="r_agreement">
          <van-checkbox
            v-model="checked"
            style="display: inline-block;margin-right:8px"
            checked-color="#07c160"
            icon-size="16px"
          ></van-checkbox>
          阅读并同意 <span @click="checkagrmentFunt">《注册协议》</span>
        </p>

        <van-button
          round
          block
          :disabled="!checked"
          :loading="isLoading"
          loading-text="注册中..."
          type="info"
          native-type="submit"
        >
          注册并登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "register",
  data() {
    return {
      isLoading: false, //注册loading
      username: "", //手机号
      securityCode: "", //验证码
      password: "", //新密码
      confirmPassword: "", //确认密码
      checked: false, //勾选协议
      timerShow: true, // 发送按钮可用
      count: 60, //倒计时
      timer: null, //定时器
    };
  },
  mounted() {},
  beforeDestroy() {
    // 离开页面，清除定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    //  登录方法
    onSubmit(values) {
      if (!/1\d{10}/.test(this.username)) {
        return this.$notify({ type: "warning", message: "请输入手机号" });
      }
      if (this.securityCode === "") {
        return this.$notify({ type: "warning", message: "请输入验证码" });
      }
      if ( this.password === "" || this.confirmPassword === "" || this.password !== this.confirmPassword ) {
        return this.$notify({
          type: "warning",
          message: "请输入密码并确认两次输入无误",
        });
      }
      // 注册接口
      this.isLoading = true;
      SERVE.authReg({params:{
        yhm: values.username,
        mm: values.password,
      }})
        .then((res) => {
          this.isLoading = false;
          if (res.data.zt === "yes") {
            // 成功
            window.localStorage.setItem("u_login", res.data.zt);
            window.localStorage.setItem("u_id", res.data.uid);
            this.$router.push("/index");
          } else {
            return this.$notify({ message: res.data.xinxi });
          }
        })
        .catch((err) => {
          this.isLoading = false;
          console.log("err", err);
        });
    },
    // 发送验证码
    sendFun(e) {
      e.preventDefault();
      if (!/1\d{10}/.test(this.username)) {
        return this.$notify({ type: "warning", message: "请输入手机号" });
      }
      // 开始倒计时
      if (!this.timer) {
        this.timerShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.timerShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }

      console.log("发送验证码");
    },
    // 返回
    onClickLeft() {
      this.$router.push("/login");
    },
    // 查看注册协议
    checkagrmentFunt() {
      console.log("查看注册协议");
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  display: inline-block;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  // padding: 0 15px;
  // box-sizing: border-box;
  .r_agreement {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    & > span {
      color: #07c160;
    }
  }
  /deep/.van-field__label{
    max-width: 90px;
  }
}
</style>
